<template>
  <div class="page-box">
    <div>
      <ProTable
        ref="proTable"
        highlight-current-row
        :columns="columns"
        :tool-button="false"
        :data-callback="dataCallback"
        @reset="clears"
        :request-api="getTableList"
        pagination
      >
        <template #tableHeader>
          <el-button type="primary" @click="openDrawer('新增', {})">新增</el-button>
        </template>
        <template #price="scope">
          {{ scope.row.price ? (scope.row.price / 100).toFixed(2) : "--" }}
        </template>
        <template #createdAt="scope">
          {{ scope.row.createdAt ? dayjs(scope.row.createdAt * 1000).format("YYYY-MM-DD HH:mm:ss") : "--" }}
        </template>
        <template #updatedAt="scope">
          {{ scope.row.updatedAt ? dayjs(scope.row.updatedAt * 1000).format("YYYY-MM-DD HH:mm:ss") : "--" }}
        </template>
        <template #availability="scope">
          {{ scope.row.availability === 1 ? "已上架" : "未上架" }}
        </template>
        <template #operation="scope">
          <el-button type="primary" link @click="openDrawer('查看', scope.row)">查看</el-button>
          <el-button type="primary" link @click="openDrawer('编辑', scope.row)">编辑</el-button>
          <el-button type="primary" link @click="removeGoods(scope.row)">删除</el-button>
        </template>
      </ProTable>
    </div>
    <GoodsInfo ref="drawerRef" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onActivated } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getGoodsList } from "@/api/modules/goods";
import GoodsInfo from "./components/GoodsInfo.vue";
import { addGoods, editGoods, deleteGoods } from "@/api/modules/goods";
import { ElMessageBox } from "element-plus";
import { useDebounceFn } from "@vueuse/core";
import dayjs from "dayjs";

const searchForm = ref<any>({
  keyword: ""
});
const proTable = ref<ProTableInstance>();
const columns = reactive<ColumnProps<any>[]>([
  {
    prop: "keyword",
    label: "商品搜索",
    isShow: false,
    search: {
      el: "input",
      props: {
        placeholder: "请输入",
        onChange: e => {
          console.log("eeeee", e);
          searchForm.value.keyword = e;
          proTable.value?.getTableList();
        }
      }
    }
  },
  { prop: "name", label: "菜品名称", minWidth: "100" },
  { prop: "price", label: "菜品价格", minWidth: "100" },
  { prop: "categoryName", label: "分类名称", minWidth: "100" },
  { prop: "createdAt", label: "创建时间", minWidth: "100" },
  { prop: "updatedAt", label: "更新时间", minWidth: "100" },
  { prop: "availability", label: "状态", minWidth: "100" },
  { prop: "operation", label: "操作", minWidth: "100", fixed: "right" }
]);

onActivated(() => {
  proTable.value?.getTableList();
});

const getTableList = useDebounceFn(async params => {
  console.log("gettable list ", params);
  const newParams = {
    ...params,
    ...searchForm.value
  };
  if (!newParams.pageIndex) {
    newParams.pageIndex = 1;
  }
  if (!newParams.pageSize) {
    newParams.pageSize = 10;
  }
  return await getGoodsList(newParams);
}, 100);

const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total,
    pageIndex: data.pageIndex,
    pageSize: data.pageSize
  };
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof GoodsInfo> | null>(null);
const openDrawer = (title: string, row: any) => {
  const params = {
    title,
    row: { ...row, price: (row.price || 0) / 100 },
    isView: title === "查看",
    api: title === "新增" ? addGoods : title === "编辑" ? editGoods : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
const removeGoods = row => {
  ElMessageBox.confirm("确认是否删除").then(async () => {
    await deleteGoods({ id: row.id });
    await proTable.value?.getTableList();
  });
};

// 重置
const clears = () => {
  searchForm.value.keyword = "";
  proTable.value?.getTableList();
};
</script>
